<!--此页面没有接口 视觉占位-->
<template>
 <div class="base-panels">
    <anchorLink :links="links"></anchorLink>
    <section class="mb20" id="c1">
      <Form :wrapper-col="{ span: 18 }">
        <Row :align="'middle'">
          <Col :span="24"
            ><h3 class="certs-title">
              参建项目(建设云数据)<i>{{ goodConfig.page.total }}</i>
             <span class="orange">此数据不作为是否在建的查询依据，请以项目实际情况为准</span>
            </h3></Col
          >
<!--          <Col :span="7">
            <FormItem label="进场时间">
              <DatePicker placeholder="请选择进场时间" />
            </FormItem>
          </Col>
          <Col :span="7">
            <FormItem label="出场时间">
              <DatePicker placeholder="请选择出场时间" />
            </FormItem>
          </Col>
          <Col>
            <Button type="primary" @click="changeHandlerA">查询</Button>
          </Col>-->
        </Row>
      </Form>
      <Table
        :columns="goodConfig.columns"
        :row-key="(record,index) => index"
        :data-source="goodConfig.list"
        :pagination="goodConfig.page"
        :loading="goodConfig.loading"
        @change="(pagination) => changeHandlerA(pagination, goodConfig)"
        bordered
      >
        <template #indexSlot="{ index }">{{
          (goodConfig.page.current - 1) * 10 + index + 1
        }}</template>


        <template #name="{ text , record}">
          <router-link
              target="_blank"
              :to="{ path: `/activity/${record.activityId}` }"
              class="blue"
          >{{ text }}</router-link
          >
        </template>

        <template #date="{ record}">
         <span>{{parseTime(record.entryDate)}} ~ {{parseTime(record.offDate)}}</span>
        </template>

      </Table>
    </section>
    <section class="mb20" id="c2">
      <Form :wrapper-col="{ span: 18 }">
        <Row :align="'middle'">
          <Col :span="8"
            ><h3 class="certs-title">
              参建项目(补录数据）<i>{{ badConfig.page.total }}</i>
            </h3></Col
          >
<!--          <Col :span="7">
            <FormItem label="进场时间">
              <DatePicker placeholder="请选择进场时间" />
            </FormItem>
          </Col>
          <Col :span="7">
            <FormItem label="出场时间">
              <DatePicker placeholder="请选择出场时间" />
            </FormItem>
          </Col>
          <Col>
            <Button type="primary" @click="changeHandler">查询</Button>
          </Col>-->
        </Row>
      </Form>
      <Table
        :columns="badConfig.columns"
        :row-key="(record) => record.applyId"
        :data-source="badConfig.list"
        :pagination="badConfig.page"
        :loading="badConfig.loading"
        @change="(pagination) => changeHandler(pagination)"
        bordered
      >
        <template #indexSlot="{ index }">{{
          (badConfig.page.current - 1) * 10 + index + 1
        }}</template>
        <template #name="{ text , record}">
          <router-link
              target="_blank"
              :to="{ path: `/activity/${record.activityId}` }"
              class="blue"
          >{{ text }}</router-link
          >
        </template>
      </Table>
    </section>
   <section id="c3">
     <Form :wrapper-col="{ span: 18 }">
       <Row :align="'middle'">
         <Col :span="8"
         ><h3 class="certs-title">
           施工许可证 <i>{{ permitConfig.page.total }}</i>
         </h3></Col
         >
       </Row>
     </Form>
     <Table
         :columns="permitConfig.columns"
         :row-key="(record,index) => index"
         :data-source="permitConfig.list"
         :pagination="permitConfig.page"
         :loading="permitConfig.loading"
         @change="(pagination) => changeHandlerC(pagination)"
         bordered
     >
       <template #indexSlot="{ index }">{{
           (permitConfig.page.current - 1) * 10 + index + 1
         }}</template>
       <template #name="{ text , record }">
         <span v-if="record.licenceFlag!=='0'" class="blue pointer" @click="permitDetail(record)">{{text}}</span>
         <span v-else>{{text}}</span>
       </template>

       <template #time="{ text , record }">
         <span>{{parseTime(record.xkgcSdate)}} ~ {{parseTime(record.xkgcEdate)}}</span>
       </template>
     </Table>
   </section>

   <Modal v-model:visible="visibleRef" :width="920" title="施工许可证详情" class="ws"
          :footer="null" :centered="true">
     <detail :detail="swDetail"/>
   </Modal>
  </div>
</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, ref, toRefs} from "vue";
import { Tabs, Table, DatePicker, Row, Col, Form, Button , Modal} from "ant-design-vue";
import { BasePanel } from "/@/components/panelComponent/index";
import { anchorLink } from "/@/components/linkComponent/index";
import {getPersonPermitApi, getPersonPrjApi, getPersonProjectApi} from "/@/api/staff";
import { parseTime } from '/@/utils';
import detail from '/@/views/servicemore/permit/detail.vue';
import {getPermitLicenceApi} from "/@/api/servicemore";
const sysColumns = [
  {
    title: "序号",
    dataIndex: "index",
    width: 70,
    align: "center",
    slots: { customRender: "indexSlot" },
  },
  { title: "工程名称", dataIndex: "actiName", slots: { customRender: "name" } ,width: 300 },
  { title: "工程类别", dataIndex: "actiBusiName", width: 150 },
  { title: "项目角色", dataIndex: "staffRoleType" },
  { title: "进出场时间", dataIndex: "entryDate", slots: { customRender: "date" }},
  { title: "合同金额(万元)", dataIndex: "fixedAmount"  },
  //{ title: "工程区划", dataIndex: "fixedAmount"  }
];

const columns = [   //补录
  {
    title: "序号",
    dataIndex: "index",
    width: 70,
    align: "center",
    slots: { customRender: "indexSlot" },
  },
  { title: "工程名称", dataIndex: "prjName", slots: { customRender: "name" }  },
  { title: "工程类别", dataIndex: "prjType", width: 150 },
  { title: "项目角色", dataIndex: "prjType" },
  { title: "合同金额(万元)", dataIndex: "allInvest" },
  { title: "工程区划", dataIndex: "prjArea"},
  { title: "数据等级", dataIndex: "dataLevel"},
];

const permitColumns = [   //施工许可证
  {
    title: "序号",
    dataIndex: "index",
    width: 70,
    align: "center",
    slots: { customRender: "indexSlot" },
  },
  { title: "施工许可证编号", dataIndex: "sgxkNewCode", slots: { customRender: "name" }  },
  { title: "许可工程名称", dataIndex: "xkgcName", width: 450 },
  { title: "合同工期", dataIndex: "xkgcSdate", slots: { customRender: "time" } },
  { title: "担任角色", dataIndex: "roleName"},
];

const links = [{
    key: '#c1',
    title: '参建项目(建设云数据)'
  }, {
    key: '#c2',
    title: '参建项目(补录数据）'
  }, {
    key: '#c3',
    title: '施工许可证'
  }
]
export default defineComponent({
  components: {
    BasePanel,
    anchorLink,
    Tabs,
    TabPane: Tabs.TabPane,
    Table,
    DatePicker,
    Row,
    Col,
    Form,
    FormItem: Form.Item,
    Button,
    Modal,
    detail
  },
  setup() {
    const personId = inject("personId") as string;
    const visibleRef = ref(false);
    const swDetail = ref({});

    const goodConfig = reactive({  //参建项目(建设云数据)
      columns: sysColumns,
      list: [],
      loading: false,
      page: {
        total: 0,
        current: 1,
      },
    });

    const badConfig = reactive({   //参建项目(补录数据）
      columns,
      list: [],
      loading: false,
      page: {
        total: 0,
        current: 1,
      },
    });

    const permitConfig = reactive({   //施工许可证
      columns:permitColumns,
      list: [],
      loading: false,
      page: {
        total: 0,
        current: 1,
      },
    });


    const changeHandlerA = (pagination) => {
      const { current, pageSize } = pagination;
      let { loading, list, page } = toRefs(goodConfig);
      loading.value = true;
      getPersonProjectApi({ personId, size: pageSize, current }).then((results) => {
        let { records, current, total } = results;
        if (total) {
          list.value = records;
          page.value = { current, total };
        }
        loading.value = false;
      });
    };

    const changeHandler = (pagination) => {
      const { current, pageSize } = pagination;
      let { loading, list, page } = toRefs(badConfig);
      loading.value = true;
      getPersonPrjApi({ personId, size: pageSize, current }).then((results) => {
        let { records, current, total } = results;
        if (total) {
          list.value = records;
          page.value = { current, total };
        }
        loading.value = false;
      });
    };

    const changeHandlerC = (pagination) => {
      const { current, pageSize } = pagination;
      let { loading, list, page } = toRefs(permitConfig);
      loading.value = true;
      getPersonPermitApi({ personId, size: pageSize, current }).then((results) => {
        let { records, current, total } = results;
        if (total) {
          list.value = records;
          page.value = { current, total };
        }
        loading.value = false;
      });
    };

    const permitDetail = async (x) => {
      permitConfig.loading = true;
      let data = await getPermitLicenceApi({ permitId : x.sgxkId });
      visibleRef.value = true;
      swDetail.value = Object.assign(x, data);
      permitConfig.loading = false;
    };

    const init = () => {
      changeHandlerA({ current: 1 });
      changeHandler({ current: 1 });
      changeHandlerC({ current: 1 });
    };

    onMounted(init);

    return {
      goodConfig,
      badConfig,
      permitConfig,
      changeHandler,
      changeHandlerA,
      changeHandlerC,
      links,permitDetail,
      parseTime,
      visibleRef,
      swDetail
    };
  },
});
</script>

<style lang="less" scoped>
.ant-tabs {
  margin-top: -60px;

  ::v-deep(.ant-tabs-nav-scroll) {
    display: flex;
    flex-direction: row-reverse;
  }
}

::v-deep(.ant-form) {
  padding-top: 10px;

  .ant-form-item {
    margin: 0 0 10px;

    .ant-calendar-picker {
      width: 100%;
    }
  }

  .ant-btn{
     margin: 0 0 10px;
  }

  .ant-col-8 {
    margin-right: 32px;
  }
}

.certs-title{
  span{
    margin-left: 20px;
    font-size: 14px;
  }
}

.ws{
  .ant-modal-body{
    padding: 8px;
  }
}
</style>
